<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        defaultExpandStatus
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <SkusTable
        ref="skusTable"
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getTableAction } from '@/utils/getBtnsRender';
import { setAuthBtnId } from '@/utils/bizUtils';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS, PROCESS_STATE_VALUES } from './constants/list';
import { getProductMarkupRateTodoRecordsService } from '@/api/finance/salePriceManage/markupRateChangeNotice';
import { queryBusinessAreaListService } from '@/api/public';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      pageSizes: [10, 100, 1000],
    }
  },
  created () {
    this.setFormAreaOptions()
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const viewBtn = { label: '查看', method: this.handleView }
      const processBtn = { label: '处理', method: this.handleProcess, hasAuth: true }
      const actionList = [viewBtn]
      if (row.state == PROCESS_STATE_VALUES.ToProcess) { // 只有待处理状态单据才可以进行处理操作
        actionList.push(processBtn)
      }
      return getTableAction({ h, row, actionList })
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = {
        ...this.formData,
        ...this.paginationParams,
      }
      const res = await getProductMarkupRateTodoRecordsService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData.results)
        this.setTotalNum(res.retData.totalNum)
      }
    },
    // 查看
    handleView (row) {
      const { href } = this.$router.resolve({
        name: 'markupRateChangeNoticeView',
        query: { recordNo: row.recordNo },
      })
      window.open(href, '_blank')
    },
    // 处理
    handleProcess (row) {
      this.$router.push({
        name: 'markupRateChangeNoticeProcess',
        query: { recordNo: row.recordNo },
      })
    },
    // 设置表单业务区域下拉集合
    async setFormAreaOptions () {
      const res = await queryBusinessAreaListService()
      if (!res?.retData) return false
      const areaIndex = this.formItems.findIndex(item => item.prop == 'areaCode')
      this.formItems[areaIndex].options = res.retData.map(item => ({
        value: item.areaCode,
        label: item.areaName
      }))
    }
  }
}
</script>
